<template>
  <v-tooltip content-class="tooltip" right>
    <template v-slot:activator="slotData">
      <slot name="default" v-bind="slotData">
        <v-icon class="pointer icon" v-on="slotData.on">mdi-information</v-icon>
      </slot>
    </template>
    <v-card class="tooltip-info" :width="propWidth">
      <v-card-title class="info-title" :style="{ backgroundColor: propColor }">
        {{ propTitle }}
      </v-card-title>
      <v-card-text class="info-content">
        <slot name="content"></slot>
      </v-card-text>
    </v-card>
  </v-tooltip>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component({
  props: {
    title: {
      type: String,
      default: "tooltip title",
    },
    color: {
      type: String,
      default: "#79839B",
    },
    width: {
      type: [Number, String],
      default: "280",
    },
  },
})
export default class TooltipInfo extends Vue {
  get propTitle() {
    return this.$props.title;
  }

  get propColor() {
    return this.$props.color;
  }

  get propWidth() {
    return this.$props.width;
  }
}
</script>
<style lang="scss" scoped>
@import "./TooltipInfo.scss";
</style>
